<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React!</title>
    <!--注意导入顺序-->
    <script src="./js/react.16.4.js"></script>
    <script src="./js/react-dom.16.4.js"></script>

    <!--将JSX语法 转换成javascript语法 -->
    <script src=" ./js/babel.min.js"></script>
    <!--<script src="../script/jquery-1.10.min.js"></script>-->
</head>
<body>
<div id="example"></div>
<div id="example1"></div>
<script type="text/babel">
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
    );

    let data = "hello React";

    import First from "./FirstDemo/first.jsx"


    let e = document.getElementById("example1");

    // let css = "font-size:20px"
    ReactDOM.render(
        <First data={data}/>, // 1.要显示的内容,变量 大括号
        e, // 2.选择节点
        function () { // 3.回调
            console.log("call back example1")
        }
    )
    class First extends React.Component{
        render(){
            return(
                <div>{this.props.data}</div>
            )
        }
    }{/*todo 这是注释*/}
    {
        // todo 这是注释
    }

</script>
</body>

</html>